<template>
  <div class="item-container-height" style="max-height: 100vh;min-height: 85vh;margin-top: 1vh;">
   
   
    <div class="item-item-height"  style="display:flex;width:100%;">
       <div style="width: 20%;min-width: 300px;border:#c8c9cc 2px solid ;margin:0px 20px 0px 0px;padding: 10px;" >
        <h4 style=" text-align: center;margin-bottom: 20px;border-bottom: #c8c9cc 2px solid;padding: 5px;">程序单上传 <br/><span style="font-size: 5%;">(只能上传一个excel工单+多个cnc程序)</span></h4>
        
          <VolForm 
        ref="myform"
        :load-key="true"
        :form-fields="formFields"
        :form-rules="formRules"
          ></VolForm>
      <p>
        <span style="margin-right: 10px;color:blue;font-size:18px;font-weight: bold;">注意:</span><br>  
        <div class="alert">
          <span style="margin-right: 10px;color:red;margin-top: 10px;border-bottom: 20px;">     1.加工前请确保加工文件(CNC程序)中不能存在刀补代码!</span><br>
        <span style="margin-right: 10px;color:red">     2.新代加工需要确认或重新配置机床里的原始基准点X,原始基准点Y！</span>
        </div>
        
      </p>
        </div>
      
        <div style="width: 80%;margin:0px 20px; flex-grow: 1;border:#c8c9cc 2px solid;padding: 10px;">
          <h4 style=" text-align: center;margin-bottom: 20px;border-bottom: #c8c9cc 2px solid;padding: 5px;">远程FTP文件显示</h4>
        <FormFile ref="myFile"></FormFile>
        </div>
    </div>
    
  </div>
</template>

<script>
import VolForm from "@/components/basic/VolForm.vue";
import FormFile from "./formFile.vue";

// import { ref } from 'vue'
// import { genFileId } from 'element-plus'
// import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'

// const upload = ref<UploadInstance>()

// const handleExceed: UploadProps['onExceed'] = (files) => {
//   upload.value!.clearFiles()
//   const file = files[0] as UploadRawFile
//   file.uid = genFileId()
//   upload.value!.handleStart(file)
// }

// const submitUpload = () => {
//   upload.value!.submit()
// }

export default {
  components: {
    VolForm,
    FormFile
  },
  data() {
    //表单验证时根据remove判断是否有图片
    return {
      formFields: {
        work_order_id:"",
        file1: [
          // {
          //   name: "测试现有文件可下载1.xlsx",
          //   path:
          //     "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载1.xlsx"
          // },
          // {
          //   name: "测试现有文件可下载2.xlsx",
          //   path:
          //     "https://files-1256993465.cos.ap-chengdu.myqcloud.com/测试现有文件可下载2.xlsx"
          // }
        ]
      },
      remoeFiled:"",
      formRules:[
        // [
        // {
        //     dataKey: "工件",
        //     title: "工件号",
        //     required: true,
        //     field: "id",
        //     data: [],
        //     type: "select",
        //     onChange: (value, option) => {
        //       var arr=JSON.parse(JSON.stringify(option));
        //       //this.remoeFiled = arr.find(x=>x.key==value).value;
        //       this.formRules[1][0].url="api/upper_ftpmachiningcenter/FileUpload?remoteFolder="+arr.find(x=>x.key==value).value;
        //     }
        // }],
          [
        {
            dataKey: "工单类型",
            title: "工单类型",
            required: false,
            selectedOption: "GW01",//
            field:"id",
            data: [],
            type: "select1",
            onChange: (value, option) => {
            //  debugger;
          //    var arr=JSON.parse(JSON.stringify(option));
              //this.remoeFiled = arr.find(x=>x.key==value).value;
              //
//this.selectvalue = datas.VersionNameID
debugger;
              this.formRules[1][0].url="api/upper_ftpmachiningcenter/FileUpload?remoteFolder="+value;
              console.log(this.formRules[1][0]);
          //   this.formRules[0][0].selectedOption = "GW01";
            //  this.selectedOption = this.option[0];
            }
        }],
        [
          {
            title: "上传",
            autoUpload: false,
            field: "file1",
            maxSize: 200, //最大1m文件
            multiple: true, //启用多文件
            maxFile: 50, //最多3个文件
            downLoad: true,
          //  url: "api/upper_ftpmachiningcenter/FileUpload?remoteFolder=GW01",
          url: "api/upper_ftpmachiningcenter/FileUpload?remoteFolder=",
            type: "file",
            uploadAfter:(result, files)=>{
             
              this.$message.info(result.message);
              console.log(this.formRules[0][0]);
                if(result.code=="OK"){
                  this.$refs.myFile.fetchRemoteFiles(null);
                }
                
                
            },
            fileclick(index, file, files) {
              debugger;
              this.$message.error(file.name);
              return true;
            }
          }
        ]
        ],
                            
    };
  },
  methods:{
    onInit() {  //框架初始化配置前，
    },

  },
 
  // created(){
  //       this.$http.get('/api/cities').then((res)=>{
  //           this.options = res.data;
  //           this.selectedOption = this.options[0];
  //       })
  //   }
  created(){
   

                },
  mounted(){
    // const editformfields = ref({"work_order_id":""});
    //         const editformoptions = ref([[{"datakey":"工单","data":[],"title":"工单号","field":"work_order_id","type":"select"},],
    //                          ]);

 

  // //   orderOption.field= "GW01";
  // //  console.log( sourc);
  // setTimeout(() => {     
  //   let orderOption =  this.formRules[0][0]//this.getOption("工单类型");
  //   let source=orderOption.data ;
  //  // orderOption.selectedOption = source[0].key+"";//"GW01"; 
  //   orderOption.selectedOption ="GW01";
  //   //orderOption.required =false; // 默认选中value为'2'的option
  
  //   //this.formRules[0][0].selectedOption ="GW01"; // 默认选中value为'2'的option
  //   }, 1000); // 延迟3秒后执行

   //this.formRules[0][0].selectvalue="GW01";
    // var myform = this.$refs.myform;
    // console.log(myform);
    // this.formRules.forEach(item => {
    //       item.forEach(x => {
    //               //判断字段配置
    //               if (x.field == "你的字段") {
    //                   //设置表单配置disabled禁用只读状态
    //                    x.disabled= this.currentAction == 'Add'
    //                    //也可以设置字段是否必填
    //                    //x.required=true;//true/false
    //               }
    //           })
    //   })
   //myform.selectedValue="GW01";
  },
};




</script>
<style scoped>
.upload-container {
  padding: 10px 15px;
}
.upload-container >>> .img-item,
.upload-container >>> .img-item img{
  width: 70px  !important;
  height: 70px  !important;
}

.item-container-height{
  height: calc(100vh - 105px) !important;
}
.item-item-height{
  height: calc(100% - 70px) !important
}
.alert {
  font-family: 'Arial', sans-serif; /* 设置字体为Arial */
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体为粗体 */
  color: #000; /* 设置字体颜色 */
  /* 其他样式，如边框、背景色、边距等 */
}
</style>